{% extends 'base.html' %}
{% block title %}
	专题
{% endblock %}
{% block head %}
	
{% endblock %}

{% block content %}

<div class="row">
    {% for topic in topics %}
        <div class="col-sm-6 col-md-3" >
            <div class="media"
                 style="height: 100px; display: flex; border: 1px solid #ddd; border-radius: 0px;
                        padding: 10px; margin-bottom: 15px; background-color: white;
                        box-shadow: 0 2px 4px rgba(0,0,0,0.05); flex-direction: row;">
                <div class="media-left" style="flex-shrink: 0;">
                    <img class="media-object"
                         src="{{ url_for('static', filename=topic.cover) if topic.cover else url_for('static', filename='images/1.jpg') }}"
                         alt="{{ topic.name }}"
                         style="width: 70px; height: 70px; object-fit: cover; border-radius: 0px;">
                </div>
                <div class="media-body" style="padding-left: 10px; display: flex; flex-direction: column; justify-content: flex-start;">
                    <a class="media-heading" style="color: #337ab7; margin-top: 0;"href="{{ url_for('blog.pertopic',topic_id=topic.id,topic_name=topic.name) }}">{{ topic.name }}</a>
                    <p style="font-size: 10px; color: #666;">{{ (topic.desc or '')[:10] }}</p>
                    <p style="font-size: 12px; color: gray;">文章数：{{ topic.blog_count or 0 }}</p>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

{% endblock %}